<template>
    <section>
        <div class="page-card">
            <div class="card-header">
                <span class="header-title">常见问题</span>
            </div>
            <div class="card-content">
                <a-input-search v-model:value="docKeys" placeholder="提交工单前可以先搜索下问题哦"
                    style="width: 300px;margin-bottom: 24px;" @search="onSearch" allow-clear @change="onChange" />

                <div v-if="!resDocs.length">
                    <div class="issues-item" style="align-items: center;">
                        <div class="issues-label">你想了解</div>
                        <div class="issues-list-wrap">
                            <a-button type="link" v-for="(item,index) in issuesType" @click="currentIdx = index">{{ item.title }}</a-button>
                            <a-button type="link" style="margin-left: auto;" @click="goDocs('/docs/category/常见问题/')">查看更多</a-button>
                        </div>
                    </div>
                    <div class="issues-item">
                        <div class="issues-label">热门问题</div>
                        <div class="issues-list-wrap">
                            <div class="issues-eg" v-for="item in issuesType[currentIdx]?.issuesList" @click="goDocs(item.path)">
                                <span style="cursor: pointer;">{{ item.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-else class="search-list">
                    <div v-for="item in resDocs" class="search-item">
                        <a :href="item.sectionRoute" target="_blank">{{ item.sectionTitle }}</a>
                    </div>
                </div>

            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">工单列表</span>
                <a-button type="primary" @click="router.push('/issueGuide')">
                    <template #icon><plus-circle-outlined /></template>
                    创建工单
                </a-button>
            </div>
            <div class="card-content page-content">
                <a-table :dataSource="tableList" :pagination="false" class="mb-16">
                    <a-table-column key="orderId" title="工单编号" data-index="orderId" />
                    <a-table-column key="category" title="问题类型" data-index="category" />
                    <a-table-column key="context" title="问题描述" data-index="context" :ellipsis="true" />
                    <a-table-column key="createdAt" title="提交时间" data-index="createdAt" />
                    <a-table-column key="status" title="状态" data-index="status">
                        <template #default="{ record }">
                            {{ selectDictLabel(orderStatusEnum, record.status) }}
                        </template>
                    </a-table-column>
                    <a-table-column key="action" title="操作" :width="200">
                        <template #default="{ record }">
                            <a-button type="link" v-if="record.status != 2"
                                @click="handleDel(record.orderId)" style="padding-left:0;">关闭工单</a-button>
                            <a-button type="link" @click="handleView(record)">查看详情</a-button>
                        </template>
                    </a-table-column>
                </a-table>

                <Pagination v-show="total > 0" :total="total" v-model:page="queryParams.pn" v-model:limit="queryParams.ps"
                    @pagination="getWorkOrderList" />
            </div>
        </div>

        <GpuDrawer v-model="docVisible" v-if="docVisible" :url="docurl"></GpuDrawer>
    </section>
</template>

<script setup name="WorkOrder">
import { reactive, ref } from 'vue'
import {
    PlusCircleOutlined
} from '@ant-design/icons-vue';
import { XsyMessage } from '@/libs/util.toast'
import { useRouter } from 'vue-router'
import { getWorkOrderListApi, closeWorkOrder } from 'api/modules/api.workOrder'
import { orderStatusEnum } from './enum.js'
import { selectDictLabel } from '@/libs/util.common'
import Pagination from '@/components/common/Pagination.vue'
import axios from 'axios'
import dbUtils from 'libs/util.strotage'

const router = useRouter()
const docVisible = ref(false)
const docurl = ref('')
const queryParams = ref({
    pn: 1,
    ps: 10
})
const currentIdx = ref(0)
const total = ref(0);
const tableList = ref([])

const issuesType = [
    {
        title: '实例',
        issuesList: [
            {title: '实例计费模式可以变更吗？', path: '/docs/help_document/faq/instance#实例计费模式可以变更吗'},
            {title: 'JupyterLab打不开是怎么回事？', path: '/docs/help_document/faq/others/#jupyterlab打不开是怎么回事'},
            {title: '为什么我不能调用GPU？', path: '/docs/help_document/faq/others/#为什么我不能调用gpu'},
            {title: '实例通过镜像还原后SSH、JupyterLab无法连接？', path: '/docs/help_document/faq/others/#实例通过镜像还原后sshjupyterlab无法连接'}
        ]
    },
    {
        title: '存储',
        issuesList: [
            {title: '系统盘空间不足怎么办？', path: '/docs/help_document/faq/storage/#系统盘空间不足怎么办'},
            {title: '数据盘空间不足怎么办？', path: '/docs/help_document/faq/storage/#数据盘空间不足怎么办'}
        ]
    },
    {
        title: '镜像',
        issuesList: [
            {title: '实例释放后，备份镜像是否还存在？', path: '/docs/help_document/faq/image/#实例释放后备份镜像是否还存在'},
            {title: '备份镜像过大，如何优化？', path: '/docs/help_document/faq/image/#备份镜像过大如何优化'},
            {title: '镜像备份失败，是什么原因？', path: '/docs/help_document/faq/image/#镜像备份失败是什么原因'}
        ]
    },
    {
        title: '账户费用',
        issuesList: [
            {title: '为什么账户余额不为0，但无法退费？', path: '/docs/help_document/faq/price#为什么账户余额不为0但无法退费'},
            {title: '代金券可转移吗？', path: '/docs/help_document/faq/price#代金券可转移吗'},
            {title: '什么时候代金券不支持使用？', path: '/docs/help_document/faq/price#什么时候代金券不支持使用'},
            {title: '如何索要发票？', path: '/docs/help_document/faq/price#如何索要发票'}
        ]
    },
    {
        title: '其他',
        issuesList: [
            {title: '已经释放的实例还能找回数据码？', path: '/docs/help_document/faq/others/#已经释放的实例还能找回数据吗'},
        ]
    },
]

const getWorkOrderList = () => {
    getWorkOrderListApi(queryParams.value).then(res => {
        tableList.value = res.data.list || []
        total.value = res.data.total
    })
}

getWorkOrderList()

// 关闭工单
const handleDel = (id) => {
    closeWorkOrder(id).then(res => {
        if (res.code == 0) {
            XsyMessage.success('关闭成功')
            getWorkOrderList()
        }
    })
}

// 查看工单详情
const handleView = (row) => {
    router.push({ path: '/workOrderDetails', query: { id: row.orderId } })
}

// 获取工单问题数组
const docs = ref([])
const getDocs = () => {
    axios({
        url: '/docs/search-index-docs-default-current.json',//请求的真是地址
        method: 'get',
        headers: { 'gm-session-id': dbUtils.get('token') },
    }).then(res => {
        docs.value = res.data.documents || []
    })
}

getDocs()

// 搜索工单数组
const docKeys = ref('')
const resDocs = ref([])
const onSearch = () => {
    resDocs.value = docs.value.filter(item => {
        return (item.pageTitle).includes(docKeys.value) || (item.sectionTitle).includes(docKeys.value)
    })
}

// 清除搜索
const onChange = (e) => {
    if (e.type == 'click') {
        resDocs.value = []
    }
}

function goDocs(path) {
    docVisible.value = true
    docurl.value = window.location.origin + path
}

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .card-content {
        .issues-item {
            display: flex;
            margin-bottom: 24px;

            .issues-label {
                color: #646F87;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                margin-right: 24px;
            }

            .issues-list-wrap {
                display: flex;
                flex-wrap: wrap;
                flex: 1;

                .issues-eg {
                    width: 50%;
                    color: #646F87;
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-bottom: 16px;
                }
            }
        }
    }
}

.search-list {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;

    .search-item {
        width: 50%;
        margin: 4px 0;
    }

}

::v-deep(.page-content .ant-table-thead>tr>th) {
    color: #8A93A7;
    font-size: 14px;
    background: #F3F5F7;
    border: none;

    &::before {
        display: none;
    }
}
</style>
